/* CSS Document */

/* FORM ELEMENTS */

/* !!!IMPORTANT NOTE!!!

There are two stylesheets - this one, named forms.css, and tables.css.

Now why two stylesheets?

In terms of UI and the Frontend is concerned, they are visually different even though for the Backend the data is generated in the same way.
Therefore, in order to associate the right css document, please keep in mind that:

forms.css - When the page looks like a form, like the ones you find on normal websites such as the registration page for Hotmail, please use this file
tables.css - When the page looks like a table, like the ones you find on a typical Excel spreadsheet, please use this file

What about if the page contains both types of elements?

Then we will have to EMBED THE CSS directly between the code.
Any other ideas? I am open to suggestions, as I personally do think that embedding the css within the HTML tag defeats the purpose of having CSS in the first place.

*/

form {
	font-family: Tahoma;
	font-size: 9px;
}

input.submit {
	background-repeat: repeat-x;
	color: #333333;
	font-size: 11px;
	font-weight: bold;
	font-family: Tahoma;
	background-image: url(../../images/catalogImages/btn_form_submit.png);
	padding-right: 5px;
	padding-left: 5px;
	background-color: #999999;
	margin-right: 5px;
	height: 19px;
	letter-spacing: 0em;
	width: 64px;
	border: 1px solid #7F9DB9;
}

.button {
	background-repeat: repeat-x;
	color: #333333;
	font-size: 11px;
	font-weight: normal;
	font-family: Tahoma;
	background-image: url(../../images/catalogImages/btn_form_submit.png);
	padding-right: 5px;
	padding-left: 5px;
	background-color: #999999;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	border-left: 1px solid #CCCCCC;
	margin-right: 5px;
	height: 21px;
}

textarea {
	font-family: Tahoma;
	font-size: 11px;
	color: #000000;
	letter-spacing: 2px;
	background-image: url(images/form_field_bg.png);
	background-repeat: repeat-x;
	background-position: top;
	height: 51px;
	width: 164px;
}

/* SELECT */

input {
	color: #000000;
	font-size: 11px;
	height: 13px;
	font-family: Tahoma;
	letter-spacing: 0.05em;
	padding-top: 2px;
	width: 128px;
}

legend {
	font-size: 1.2em;
	font-weight: bold;
}
    label {
	color: #666;
	font-weight: bold;
    }
    select {
	font-size: 11px;
	font-family: Tahoma;
	width: 164px;
    }
    select.replaced {
	display: none;
	height: 15px;
	width: 256px;
    }
    ul.selectReplacement {
      background: url(../../images/catalogImages/btn_dropdown_out.png) no-repeat left top;
      margin: 0;
      padding: 0;
      height: 1.65em;
      width: 300px;
    }
    ul.selectReplacement li {
      background: #cf5a5a;
      color: #fff;
      cursor: pointer;
      display: none;
      font-size: 11px;
      line-height: 1.7em;
      list-style: none;
      margin: 0;
      padding: 1px 12px;
      width: 276px;
    }
    ul.selectOpen li {
      display: block;
    }
    ul.selectReplacement li.selected {
      background: url(bottom.gif) bottom left no-repeat;
      color: #fff;
      display: block;
    }
    ul.selectOpen li.selected {
      background: #9e0000;
      display: block;
    }
    ul.selectOpen li:hover,
    ul.selectOpen li.hover,
    ul.selectOpen li.selected:hover {
      background: #9e0000;
      color: #fff;
    }

/* TABLE ELEMENTS */

table {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.odd {
	background-color: #EDF3FE;
}

.even {
	background-color: #FFFFFF;
}

th {
	background-color: #ECECEC;
	border: 1px solid #CCCCCC;
	font-size: 9px;
	font-weight: bold;
	height: 18px;
	line-height: 18px;
	text-indent: 5px;
	top: 0px;
	bottom: 0px;
	text-align: left;
}

tr {
	padding: 3px 5px 2px;
}

td {
	font-family: Tahoma;
	font-size: 11px;
	color: #000000;
	vertical-align: top;
	border: 1px solid #FFFFFF;
}

td.highlight {
}

.box1 {
	padding: 5px;
	border-width: thin;
	border-style: solid;
	border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
	border-width: 3px;
	border-style: solid;
	padding: 5px;
}
